<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>一对一指导</title>
		<link rel="stylesheet" href="css/header.css" />
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
		<link rel="stylesheet" href="css/footer.css" />
		<link rel="stylesheet" href="css/product.css" />
		<link rel="stylesheet" href="css/animate.css" />
		<style>
			/*轮播图修改样式*/
			
			.carousel .swiper-button-white {
				height: 35px;
				background-color: #faac05;
				width: 25px;
				background-size: 15px 44px;
			}
			
			.carousel .swiper-button-next {
				right: 0;
			}
			
			.carousel .swiper-button-prev {
				left: 0;
			}
			
			.carousel {
				min-width: 1226px;
			}
			
			.carousel .swiper-slide img {
				float: left;
			}
			/*视频部分样式*/
			
			.video_part {
				min-width: 1226px;
				height: auto;
				/*font-size: 0;*/
				position: relative;
			}
			
			.video_content {
				width: 50%;
				height: 100%;
				position: relative;
				float: right;
			}
			
			.video_content video {
				width: 100%;
				float: left;
			}
			
			.play {
				width: 80px;
				height: 80px;
				position: absolute;
				top: 50%;
				left: 50%;
				margin-top: -40px;
				margin-left: -40px;
				border-radius: 50%;
				background: url(img/play.png) center center;
				background-size: 100% 100%;
				cursor: pointer;
			}
			
			.video_explain {
				width: 50%;
				height: 100%;
				position: absolute;
				left:0;
				top: 0px;
			}
			.video_explain>div{
				/*background-color: orangered;*/
				width: 520px;
				position: absolute;
				left: 50%;
				margin-left: -210px;
			}
			
			.video_explain h5,
			.video_explain p {
				padding-right: 10px;
			}
			
			.video_explain h5 {
				font-size: 20px;
				font-weight: normal;
				margin-top: 6%;
			}
			
			.video_explain p {
				font-size: 14px;
				font-weight: normal;
				margin-top: 5%;
				text-indent: 32px;
				line-height: 40px;
			}
			
			.video_explain span {
				display: inline-block;
				/*margin-left: 10%;*/
				margin-top: 5%;
				padding: 6px 30px 7px;
				background-color: #96d610;
				color: white;
				border-radius: 20px;
				cursor: pointer;
			}
			
			.video_explain a {
				padding-left: 20px;
			}
			
			.more {
				font-size: 14px;
				text-decoration: underline;
				color: gray;
				font-weight: normal;
			}
			.product_feature {
				clear: both;
				min-width: 1226px;
				background-color: #fafafa;
				padding-bottom: 50px;
			}
			.product_feature>h5{
				border-top: 1px solid gainsboro;
			}
			.subhead{
				padding: 30px 0 60px;
				font-size: 20px;
				font-weight: normal;
				width: 50%;
				position: relative;
				background-color: orange;
			}
			.subhead span{
				width: 520px;
				position: absolute;
				left: 30%;
				/*margin-left: -210px;*/
				background-color: red;
			}
			.feature_list {
				/*font-size: 0;*/
				margin: 0 auto;
				height: 150px;
			}
			.feature_list li{
				float: left;
				font-size: 16px;
				width: 33.3%;
				height: 100%;
				text-align: center;
				/*background-color: orange;*/
				box-sizing: border-box;

			}
			.feature_list li:not(:last-child){
				border-right: 1px solid gainsboro;
			}
			.feature_list li img{
				width: 15%;
				margin-top: 15px;
			}
			.feature_list li h5{
				margin-top: 20px;
				font-size: 18px;
				font-weight: normal;
				color: black;
			}
			.feature_list li p{
				margin-top: 10px;
				color: gray;
				font-weight: normal;
				font-size: 14px;
			}
			.curriculum {
				min-width: 1226px;
				position: relative;
				background-color: #f2ffff;
			}
			.introduce_content {
				position: absolute;
				top: 120px;
				left: 40%;
			}
			.curriculum img{
				margin: 0 5% 0 12%;
				width: 320px;
				vertical-align: top;
				z-index: 10;
			}
			
			.curriculum>p{
				/*padding: 30px 0 60px;
				font-size: 18px;
				font-weight: normal;
				width: 50%;
				position: relative;
				border-top: 1px solid gainsboro;*/
			}
			
			.introduce_content h5{
				width: 560px;
				font-size: 20px;
				font-weight: normal;
				line-height: 80px;
			}
			.introduce_content p{
				width:560px;
				line-height: 32px;
				font-size: 14px;
			}
			.footer_img {
				min-width: 1226px;
				font-size: 0;
			}
			.footer_img img{
				width: 100%;		
			}
			
		</style>
	</head>

	<body ng-app="">
		<div ng-include="'header.html'"></div>
		<div class="carousel">
			<div class="swiper-container swiper-container1">
				<div class="swiper-wrapper">
					<div class="swiper-slide"><img width="100%" src="img/swiper2.png" alt="" /></div>
					<div class="swiper-slide"><img width="100%" src="img/swiper1.png" alt="" /></div>
					<div class="swiper-slide"><img width="100%" src="img/swiper2.png" alt="" /></div>
					<div class="swiper-slide"><img width="100%" src="img/swiper1.png" alt="" /></div>
				</div>
				<!-- Add Pagination -->
				<!--<div class="swiper-pagination"></div>-->
				<div class="swiper-button-next swiper-button-white"></div>
				<div class="swiper-button-prev swiper-button-white"></div>
			</div>
		</div>
		<div class="video_part">
			<div class="video_explain">
				<div>
					<h5>视频宣传（一对一）</h5>
				<p>Mark几年前身患中风，很多传统治疗师都说他难以康复了，他的妻子却从未放弃。偶然的一次机会，她接触到“远程康复模式”和“速康生物反馈系统”设备，她决定尝试一下。艾伦是Mark的治疗师，艾伦通过远程视频极为耐心地指导他做以毫米为计量的康复运动。在爱人和治疗师的鼓励下，他的身体一点点的恢复着，他许久未见的好友都说他的进步明显。</p>
				<span>免费评估</span>
				<a class="more" href="javaScript:void(0)">了解更多</a>
				</div>
			</div>
			<div class="video_content">
				<video id="video1" poster="img/poster1.png">
					<!--<source src="img/mv.mp4" type="video/mp4">-->
					<source src="" type="video/ogg"> 您的浏览器不支持观看视频。
				</video>
				<div class="play">

				</div>
			</div>
		</div>
		<div class="product_feature">
			<h5 class="subhead"><span>产品特色</span></h5>
			<ul class="feature_list">
				<li>
					<a href="javaScript:void(0)">
						<img src="img/feature1.png" alt="" />
						<h5>现金设备</h5>
						<p>先进，进口的设备</p>
					</a>
				</li>
				<li>
					<a href="javaScript:void(0)">
						<img src="img/feature2.png" alt="" />
						<h5>专业指导</h5>
						<p>专业的治疗师团队</p>
					</a>
				</li>
				<li>
					<a href="javaScript:void(0)">
						<img src="img/feature2.png" alt="" />
						<h5>贴心服务</h5>
						<p>便捷，足不出户在家做康复；<br />
						康复咨询群</p>
					</a>
				</li>
			</ul>
		</div>
		
		<div class="expert_introduce">
			<h5 class="subhead"><span>专家介绍</span></h5>
			<div class="experts">
				<div class="swiper-container swiper-container2">
        			<div class="swiper-wrapper">
            			<div class="swiper-slide">
            				<a href="javaScript:void(0)">
            					<img src="img/expert1.png"/>
            					<div class="expert_content animated fadeInUp">
            						<h5>物理治疗师主管</h5>
            						<p>李传平</p>
            						<p>曾工作于上海同济大学附属养志医院阳光康复中心的作业治疗科，毕业于四川大学华西临床医学院。擅长治疗神经系统疾病（中风、脑外伤等）的手功能康复、肩痛处理、ADL训练、认知知觉功能处理、家居安置及社会适应训练等。</p>
            						<span>预约专家</span>
            					</div>
            				</a>        				
            			</div>
            			<div class="swiper-slide">
            				<a href="javaScript:void(0)">
            					<img src="img/expert1.png"/>
            					<div class="expert_content animated fadeInUp">
            						<h5>物理治疗师主管</h5>
            						<p>李传平</p>
            						<p>曾工作于上海同济大学附属养志医院阳光康复中心的作业治疗科，毕业于四川大学华西临床医学院。擅长治疗神经系统疾病（中风、脑外伤等）的手功能康复、肩痛处理、ADL训练、认知知觉功能处理、家居安置及社会适应训练等。</p>
            						<span>预约专家</span>
            					</div>
            				</a>
            			</a></div>
            			<div class="swiper-slide">
            				<a href="javaScript:void(0)">
            					<img src="img/expert1.png"/>
            					<div class="expert_content animated fadeInUp">
            						<h5>物理治疗师主管</h5>
            						<p>李传平</p>
            						<p>曾工作于上海同济大学附属养志医院阳光康复中心的作业治疗科，毕业于四川大学华西临床医学院。擅长治疗神经系统疾病（中风、脑外伤等）的手功能康复、肩痛处理、ADL训练、认知知觉功能处理、家居安置及社会适应训练等。</p>
            						<span>预约专家</span>
            					</div>
            				</a>
            			</div>
            			<div class="swiper-slide">
            				<a href="javaScript:void(0)">
            					<img src="img/expert1.png"/>
            					<div class="expert_content animated fadeInUp">
            						<h5>物理治疗师主管</h5>
            						<p>李传平</p>
            						<p>曾工作于上海同济大学附属养志医院阳光康复中心的作业治疗科，毕业于四川大学华西临床医学院。擅长治疗神经系统疾病（中风、脑外伤等）的手功能康复、肩痛处理、ADL训练、认知知觉功能处理、家居安置及社会适应训练等。</p>
            						<span>预约专家</span>
            					</div>
            				</a>
            			</div>
        			</div>
        <!-- Add Pagination -->
        			<!--<div class="swiper-pagination"></div>-->
    			</div>
    			
    			<div class="swiper-button-next swiper-button-black next2 "></div>
        		<div class="swiper-button-prev swiper-button-black prev2"></div>		
			</div>
		</div>
		
		<div class="curriculum">
			<h5 class="subhead"><span>课程介绍</span></h5>
			<p><span>儿童课程</span><span>成人课程</span></p>
			<img src="img/doctor1.png" alt="" />
			<div class="introduce_content">
				<h5>儿童家庭康复的重要性</h5>
				<p>任何脑瘫都是无法自愈的，必须经过长期的治疗，才能将功能障碍减少到最低程度，否则会导致不良姿势、肢体畸形或无法行动。<br />因此，宝宝在医院或者机构做完康复以后，回家里继续进行家庭康复也十分重要它不仅是医院内康复的延续和巩固，而且是脑瘫最长期的康复场所和进入社会的寄出。<br />孩子的家长是最重要的康复训练执行者，所以，家长除了要增强对康复治疗的信心外，还要掌握必要的康复知识和训练方法。</p>
			</div>
		</div>
		
		<div class="footer_img">
			<img src="img/footerPng.png"/>
		</div>
		
		
		<div class="footer">
			<div class="footer_content">
				<dl>
				<dt>新手指南</dt>
				<dd><a href="javaScript:void(0)">中风康复课程介绍</a></dd>
				<dd><a href="javaScript:void(0)">儿童康复课程介绍</a></dd>
				<dd><a href="javaScript:void(0)">注册&登录</a></dd>
			</dl>
			<dl>
				<dt>关于课程</dt>
				<dd><a href="javaScript:void(0)">康复治疗师团队</a></dd>
				<dd><a href="javaScript:void(0)">速康智创居家康复工作室</a></dd>
				<dd><a href="javaScript:void(0)">远程指导课程介绍</a></dd>
			</dl>
			<dl>
				<dt>商务合作</dt>
				<dd><a href="javaScript:void(0)">加盟合作</a></dd>
				<dd><a href="javaScript:void(0)">应聘老师</a></dd>
				<dd><a href="javaScript:void(0)">加入我们</a></dd>
			</dl>
			<dl>
				<dt>网站声明</dt>
				<dd><a href="javaScript:void(0)">网站声明</a></dd>
				<dd><a href="javaScript:void(0)">帮助中心</a></dd>
				<dd><a href="javaScript:void(0)">意见反馈</a></dd>
			</dl>
			<dl>
				<dt>关于我们</dt>
				<dd><a href="javaScript:void(0)">联系我们</a></dd>
				<dd><a href="javaScript:void(0)">企业文化</a></dd>
			</dl>
			</div>
			<div class="copyright">
				<p>Powered by 速康智创 ©2014-2017</p>
				<p>课程内容版权均归 速康智创 所有 沪ICP备 16004547</p>
			</div>
		</div>

	</body>
	<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function  () {
			var swiper = new Swiper('.swiper-container1', {
			pagination: '.swiper-pagination',
			paginationClickable: true,
			nextButton: '.swiper-button-next',
			prevButton: '.swiper-button-prev'
				//     		autoplay:5000
		});
		
				//	轮播图2
		 var swiper = new Swiper('.swiper-container2', {
//      	pagination: '.swiper-pagination',
        	slidesPerView: 3,
        	paginationClickable: true,
        	spaceBetween: 10,
        	freeMode: true,
        	nextButton: '.next2 ',
        	prevButton: '.prev2'
    	});
    	
//  	$('.expert_content').addClass('animated fadeInUp');

		for (var i = 0; i < 4; i++) {
			var imgSrc=$(".experts .swiper-slide").eq(i).find("img").attr("src");
			console.log(imgSrc)
			$(".experts .swiper-slide").eq(i).css("background-image","url("+imgSrc+")")
		}
		})

	</script>

</html>